<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
  </head>
  <body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
      <a href="#" class="classify"></a>
      <div class="search">
        <form action="">
          <input type="text" name="" id="" value="厨卫保暖季" />
        </form>
      </div>
      <a href="#" class="login"></a>
    </div>

    <!-- banner部分 -->
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/ecb88991b8744c4785fc176f2b6fb3a3.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/f8ab2146df45436796f544b3be58a4d0.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img
              src="./images/20201120-8e4ce47dff65481c910d41e16c0d93ad2ed2747bd4a84dc4.jpg"
              alt=""
            />
          </div>
          <div class="swiper-slide">
            <img src="./images/160585789905017615.jpg" alt="" />
          </div>
        </div>
        <!--  Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <!-- 广告部分 -->

    <div class="ad">
      <a href="#">
        <img src="./images/160585873885989163.gif" alt="" />
      </a>
      <a href="#">
        <img src="./images/160585850571750327.gif" alt="" />
      </a>
      <a href="#">
        <img src="./images/160585852233839519.gif" alt="" />
      </a>
    </div>

    <!-- nav 部分 -->

    <nav>
      <a href="#">
        <img src="./icons/160518006726907674.png" alt="" />
        <span>苏宁秒杀</span>
      </a>
      <a href="#">
        <img src="./icons/158225094251284751.png" alt="" />
        <span>苏宁超市</span>
      </a>
      <a href="#">
        <img src="./icons/158225098618947382.png" alt="" />
        <span>苏宁拼购</span>
      </a>
      <a href="#">
        <img src="./icons/159919108574328432.png" alt="" />
        <span>手机数码</span>
      </a>
      <a href="#">
        <img src="./icons/158225106790473382.png" alt="" />
        <span>苏宁家电</span>
      </a>
      <a href="#">
        <img src="./icons/158225110605546246.png" alt="" />
        <span>免费水果</span>
      </a>
      <a href="#">
        <img src="./icons/158225119197911173.png" alt="" />
        <span>赚钱消消乐</span>
      </a>
      <a href="#">
        <img src="./icons/158225123358512204.png" alt="" />
        <span>签到有礼</span>
      </a>
      <a href="#">
        <img src="./icons/158225129991255185.png" alt="" />
        <span>领劵中心</span>
      </a>
      <a href="#">
        <img src="./icons/158225135374622745.png" alt="" />
        <span>更多频道</span>
      </a>
    </nav>

    <!-- 礼包 部分 -->

    <div class="newImgFloor">
      <a href="#" class="newItem1">
        <img src="./images/160415964665844208.png" alt="" />
      </a>
      <a href="#" class="newItem2">
        <img src="./images/160415965447533335.gif" alt="" />
      </a>
      <a href="#" class="newItem3">
        <img src="./images/160415966314573447.gif" alt="" />
      </a>
    </div>

    <!-- 底部部分 -->

    <div class="button">
      <a href="">
        <img src="./icons/157105696599538235.png" alt="" />
        <span>首页</span>
      </a>
      <a href="">
        <img src="./icons/157562573743964714.png" alt="" />
        <span>分类</span>
      </a>
      <a href="">
        <img src="./icons/157543978244974042.png" alt="" />
        <span>排行榜</span>
      </a>
      <a href="">
        <img src="./icons/157543979328589256.png" alt="" />
        <span>购物车</span>
      </a>
      <a href="">
        <img src="./icons/157543980229048220.png" alt="" />
        <span>我的易购</span>
      </a>
    </div>

    <script src="./js/swiper.min.js"></script>
    <script>
      var swiper = new Swiper(".swiper-container", {
        autoplay: true,
        autoplay: {
          delay: 2000, //1秒切换一次
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
        },
      });
      //鼠标覆盖停止自动切换
      swiper.el.onmouseover = function () {
        swiper.autoplay.stop();
      };

      // //鼠标离开开始自动切换
      swiper.el.onmouseout = function () {
        swiper.autoplay.start();
      };
    </script>
  </body>
</html>
